<template>
  <div class="box4">
    <div style="height: 100%; width: 100%;" ref="chart"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue"
import * as echarts from "echarts"
import chinaJson from "../china.json"
let chart = ref()
echarts.registerMap("china", chinaJson as any)
onMounted(() => {
  let mychatrs = echarts.init(chart.value)
  mychatrs.setOption({
    geo: {
      type: "map",
      map: "china",
      roam: true,
      //地图的位置调试
      left: 150,
      top: 150,
      right: 150,
      zoom: 1.2,
      bottom: 0,
      label: {
        show: true,
        color: "black",
        fontSize: 14
      },
      itemStyle: {
        //每一个多边形的样式
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: 'red' // 0% 处的颜色
          }, {
            offset: 1, color: 'blue' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        },
        opacity: .8
      },
      //地图高亮的效果
      emphasis: {
        itemStyle: {
          color: 'red'
        },
        label: {
          fontSize: 40
        }
      },
      
    },
    series: [
        {
          type: 'lines',//航线的系列
          data: [
            {
              coords: [
                [116.405285, 39.904989],  // 起点
                [119.306239, 26.075302]   // 终点

              ],
              // 统一的样式设置
              lineStyle: {
                color: 'orange',
                width: 5
              }
            },
            {
              coords: [
                [116.405285, 39.904989],  // 起点
                [114.298572, 30.584355]   // 终点

              ],
              // 统一的样式设置
              lineStyle: {
                color: 'yellow',
                width: 5
              }
            }
          ],
          //开启动画特效
          effect: {
            show: true,
            symbol: 'arrow',
            color: 'black',
            symbolSize: 10
          }
        }
      ]
  })
})
</script>

<style scoped></style>
